<template>
	<view class="cotegory-container">
		<searchBar></searchBar>
		<view class="bottom">
			<scroll-view class="left" scroll-y="true">
				<view class="item" v-for="(item, index) in categoryList" :key="item.cat_id" @tap="activeIndex = index" :class="{ active: activeIndex === index }">{{ item.cat_name }}</view>
			</scroll-view>
			<scroll-view class="right" scroll-y="true">
				<!-- 顶部图片 -->
				<image class="banner" src="../../static/titleImage.png" mode=""></image>
				<!-- 区域 -->
				<view class="pro-section" v-for="item in categoryList[activeIndex].children" :key="item.cat_id">
					<view class="title">
						/<text>{{ item.cat_name }}</text>/
					</view>
					<!-- 列表区域 -->
					<view class="pro-items">
						<view class="item" v-for="it in item.children" :key="it.cat_id">
							<image :src="it.cat_icon" mode=""></image>
							<text>{{it.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import searchBar from '../components/searchBar.vue';
export default {
	components: {
		searchBar
	},
	data() {
		return {
			categoryList: [],
			activeIndex: 0
		};
	},
	methods: {},
	onLoad() {
		this.$request({
			url: '/api/public/v1/categories',
			method: 'get'
		}).then(res => {
			console.log(res);
			this.categoryList = res;
		});
	}
};
</script>

<style lang="less" scoped>
.cotegory-container {
	position: relative;
	height: 100vh;
	.bottom {
		top: 91rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		.left {
			width: 200rpx;
			background-color: red;
			.item {
				background-color: #f4f4f4;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				&.active {
					background-color: white;
					color: #fe2c4b;
					position: relative;
					&::before {
						content: '';
						position: absolute;
						left: 0;
						height: 60rpx;
						top: 20rpx;
						background-color: #fe2c4b;
						width: 10rpx;
					}
				}
			}
		}
		.right {
			flex: 1;
			padding: 20rpx 16rpx;
			.banner{
				width: 520rpx;
				height: 180rpx;
			}
			.pro-section{
				margin-top: 35rpx;
				.title{
					text-align: center;
					color: #dadada;
					margin-bottom: 50rpx;
					text{
						color: black;
						margin: 0 35rpx;
					}
				}
				.pro-items{
					display: flex;
					flex-wrap: wrap;
					.item{
						width: 33.3333%;
						text-align: center;
						font-size: 25rpx;
						image{
							display: block;
							width: 120rpx;
							height: 120rpx;
							margin: 0 auto;
						}
					}
				}
			}
		}
	}
}
</style>
